<template>
    <div>
        <div class="container" style="margin-bottom: 20px">
            <el-tag class="tag-header" :class="selectTag==1?'active':''" @click="selectClick(1)">月报表</el-tag>
            <el-tag class="tag-header" :class="selectTag==2?'active':''" @click="selectClick(2)">年报表</el-tag>
        </div>
        <div class="container">
            <div>
                <el-row :gutter="20">

                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <div class="right-box">
                                <div class="left-title">
                                    <div class="inline-block">
                                        <span class="demonstration">统计时间：</span>
                                        <el-date-picker v-model="statisticTime" size="mini"
                                                        :type="pickerType" :value-format="valFormat"
                                                        placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                    <div class="inline-block">
                                        <span class="demonstration">能源类型：</span>
                                        <el-select v-model="energyType" size="mini" placeholder="请选择">
                                            <el-option v-for="item in energyData" :key="item.code" :label="item.name"
                                                       :value="item.code">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="inline-block">
                                        <span class="demonstration">组织类型：</span>
                                        <el-select v-model="orgType" size="mini" @change="orgTypeChange" placeholder="请选择">
                                            <el-option v-for="item in orgTypeData" :key="item.dicValue" :label="item.dicName"
                                                       :value="item.dicValue">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="inline-block">
                                        <span class="demonstration">统计对象：</span>
                                        <el-select v-model="statisticObj" multiple  size="mini" placeholder="请选择">
                                            <el-option v-for="item in orgObjData" :key="item.id" :label="item.orgFullName"
                                                       :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="inline-block" style="float: right">
                                        <el-button type="primary" size="mini" @click="exportTable">导出</el-button>
                                    </div>
                                    <div class="inline-block" style="float: right">
                                        <el-button type="primary" size="mini" @click="searchBtn">查询</el-button>
                                    </div>

                                </div>

                            </div>
                            <div style="margin-top: 20px;">
                                <template>
                                    <el-table  stripe :data="dataTable" style="width: 100%" id="exportTab">
                                        <el-table-column :label="tableTitle">
                                            <el-table-column prop="orderNo" label="序号" width="150"></el-table-column>
                                            <el-table-column prop="name" label="组织机构" width="150"></el-table-column>
                                            <el-table-column v-for="(item,index) in dataX" :label="item" :key="index">
                                                <el-table-column :label="'单位('+tableUnit+')'" width="120">
                                                    <template slot-scope="scope">
                                                        <span>{{scope.row.data[index]}}</span>
                                                    </template>
                                                </el-table-column>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>

</template>

<script>
    import {getEnergyTypeData,getOrgTypeData,getOrgObjData,getAllBuildListFormData} from '../../../api/index';
    import {famatDatesTimes} from '../../common/com';
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    export default {
        name: "energy-ranking",
        data(){
            return {
                selectTag:1,
                energyType:'',
                energyData:'',
                orgType:'',
                statisticObj:[],
                statisticTime:'',
                valFormat:'yyyy-MM',
                orgTypeData:'',
                orgObjData:'',
                staticisType:1,
                pickerType:'month',
                tableTitle:'',
                dataX:[],
                tableUnit:'',
                dataTable: [],
            }
        },
        mounted(){
            this.getEnergyTypeData();
            this.getOrgTypeData();
        },
        created(){
        },
        methods:{
            getEnergyTypeData(){
                getEnergyTypeData({}).then((res)=>{
                    this.energyData = res.datas
                })
            },
            getOrgTypeData(){
                getOrgTypeData({}).then((res)=>{
                    this.orgTypeData = res.datas;
                })
            },
            getOrgObjData(){
                getOrgObjData({
                    typeName:this.orgType
                }).then((res)=>{
                    this.orgObjData = res.datas;
                })
            },
            orgTypeChange(val){
                this.statisticObj = [];
                this.getOrgObjData();
            },
            getAllBuildListFormData(){
                getAllBuildListFormData({
                    startDate:this.statisticTime,
                    endDate:'',
                    energyType:this.energyType,
                    orgType:this.orgType,
                    ids:this.statisticObj,
                    staticisType:this.selectTag,
                }).then((res)=>{
                    this.dataX = res.X.data2;
                    this.dataTable = res.dataTable;
                    this.tableTitle = res.X.title;
                    this.tableUnit = res.X.unit;
                })
            },
            searchBtn(){
                this.getAllBuildListFormData();
            },
            exportTable(){
                var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
                var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)

                /* get binary string as output */
                var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), this.tableTitle+'.xlsx')
                } catch (e) {
                    if (typeof console !== 'undefined') {
                        console.log(e, wbout)
                    }
                }
                return wbout
            },
            selectClick(v){
                this.selectTag = v;
                this.statisticTime = "";
                if(v==1){
                    this.pickerType = 'month';
                    this.valFormat = 'yyyy-MM';
                }
                if(v==2){
                    this.pickerType = 'year';
                    this.valFormat = 'yyyy';
                }
            },
            formatTime(row, column, cellValue){
                return famatDatesTimes(cellValue);
            },
        },
    }
</script>

<style scoped>
    /deep/ .el-tag{
        margin-right: 25px;
        line-height: 36px;
        height: 36px;
        font-size: 16px;
        background-color: #fff;
        border: 0;
        cursor: pointer;
    }
    .tag-header{
        color: #0FBBB5;
    }
    .tag-header.active{
        color: #fff;
        background-color: #0fbbb5;
    }
    .inline-block{
        display: inline-block;
        margin-right: 10px;
        /*width: 30%;*/
    }
    .inline-block .demonstration{
        font-size: 14px;
    }
    /deep/ .el-date-editor.el-input {
        width: 110px;
    }
    /deep/ .el-select{
        width: 110px;
    }
    /deep/ .inline-block .el-tag {
        margin-right: 0;
        line-height: 20px;
        height: 20px;
        font-size: 12px;
    }
</style>